<template>
  <div id="comdescribe">
    <Sidebar></Sidebar>
    <!-- 公司介绍 -->
    <div class="company">
      <p
        class="p1"
        style="
          margin-left: 18%;
          margin-top: 80px;
          font-family: 宋体;
          font-size: 35px;
          color: white;
        "
      >
        <b>{{ comPosElem.cname }}</b>
      </p>
      <p
        class="p1"
        style="
          margin-left: 18%;
          margin-top: 160px;
          font-family: 宋体;
          font-size: 27px;
          color: white;
        "
      >
        {{ comPosElem.caddress }}
      </p>
      <p
        class="p1"
        style="
          margin-left: 30%;
          margin-top: 160px;
          font-family: 宋体;
          font-size: 27px;
          color: white;
        "
      >
        创立于{{ comPosElem.cyear }}年
      </p>

      <p
        class="p1"
        style="
          margin-left: 83%;
          margin-top: 215px;
          font-family: 宋体;
          font-size: 20px;
          color: #00bebd;
        "
      >
        电话：{{ comPosElem.cphone }}
      </p>
      <p
        class="p1"
        style="
          margin-left: 83%;
          margin-top: 245px;
          font-family: 宋体;
          font-size: 20px;
          color: #00bebd;
        "
      >
        邮箱：{{ comPosElem.cemail }}
      </p>
    </div>
    <!-- 在招职位 -->
    <div class="company-job">
      <p class="p2"><b>在招职位</b></p>
      <div v-for="(jobInfo, index) in currentTableData" :key="index">
        <button class="job" @click="jobdescribe(jobInfo)">
          <p
            class="p1"
            style="
              margin-left: 5%;
              margin-top: 20px;
              font-family: 宋体;
              font-size: 20px;
            "
          >
            <b>{{ jobInfo.pname }}</b> [{{ jobInfo.paddress }}]
          </p>

          <p
            class="p1"
            style="
              margin-left: 5%;
              margin-top: 75px;
              font-family: 宋体;
              font-size: 18px;
            "
          >
            <b style="color: rgb(0, 148, 239)">薪资 : {{ jobInfo.salary }} </b>
          </p>
          <p
            class="p1"
            style="
              margin-left: 25%;
              margin-top: 75px;
              font-family: 宋体;
              font-size: 18px;
            "
          >
            <b style="color: rgb(254, 69, 69)">热度 : {{ jobInfo.hot }}</b>
          </p>
        </button>
      </div>
    </div>

    <div class="image"></div>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      style="
        position: absolute;
        left: 400px; /* 调整距离左边的距离 */
        width: 100px; /* 可以根据需要调整宽度 */
        font-size: large; /* 可以根据需要调整字体大小 */
      "
    >
    </el-pagination>
  </div>
</template>
  
  <script>
import axios from "axios";
import Sidebar from "@/components/SeekerSidebar.vue";
export default {
  components: {
    Sidebar,
  },
  computed: {},
  methods: {
    jobdescribe(jobInfo) {
      this.$router.push({
        name: "Posdescribe",
        params: { ElemSeekerPos: jobInfo,Cinfo:this.comPosElem.cinfo},
      });
    },
    // 更新当前页的数据
    updateCurrentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentTableData = this.comPosElem.positionList.slice(start, end);
    },
    //分页跳转
    handlePageChange(page) {
      this.currentPage = page;
      this.updateCurrentTableData();
    },
  },
  created() {
    this.total = this.comPosElem.positionList.length; // 总数据条数
    this.updateCurrentTableData(); // 更新当前页的数据
    // console.log("currentTableData", this.currentTableData);
  },
  data() {
    return {
      comPosElem: JSON.parse(sessionStorage.getItem("ComPanyDescribe")),
      currentTableData: [], // 当前页显示的数据
      total: 0, // 总数据条数
      pageSize: 3, // 每页条数
      currentPage: 1, // 当前页码
    };
  },
};
</script>
  <style scoped>
#comdescribe {
  border: none;
  height: 1200px;
  background-image: linear-gradient(to bottom, #d1eded, white);
  background-position: to center;
}

.company {
  height: 280px;
  border: none;
  background-color: #38556b;
}
.p1 {
  position: absolute;
  margin: 0;
}
.company-job {
  position: absolute;
  margin-top: 1%;
  margin-left: 12%;
  width: 40%;
  height: 1000px;
  border: none;
}
.p2 {
  /* margin-left: 100px; */
  margin-top: 50px;
  font-size: 30px;
}
.image {
  margin-left: 60%;
  margin-top: 5%;
  border: none;
  width: 30%;
  height: 700px;
  background-image: url("/public/image/公司.jpg");
  background-size: 100% 100%;
}
.job {
  display: flex;
  margin-left: 10%;
  margin-top: 50px;
  width: 55%;
  height: 150px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 15px;
}

.job:hover {
  color: rgb(122, 226, 205);
}
</style>